import * as echarts from '../../../../components/ec-canvas/echarts';
import { accAdd } from '../../../../utils/compute.js';
import { timestampToTime } from '../../../../utils/time.js';
let chart: any = null
let lazyChart: any = null
let barChart: any = null
Page({
	data: {
		ec: {
			onInit: initChart
		},
		lazyEc: {
			lazyLoad: true
		},
		type: 'outcome',  //income
		chartOptionData: {}
	},
	onLoad() {
		this.lazyComponent = this.selectComponent('#mychart-dom-lazy')
		this.barComponent = this.selectComponent('#mychart-dom-bar')
		// 模拟请求
		setTimeout(() => {
			this.setData({
				chartOptionData: {
					income: [150, 230, 224, 218, 135, 147, 260],
					outcome: [100, 100, 0, 218, 135, 147, 260],
					lineOption: [["2021-01-04 08:14:36", 1.1221], ["2021-03-05 08:18:46", 0.8818], ["2021-08-07 08:20:46", 0.4943], ["2021-09-09 08:22:46", 0.6080], ["2021-09-10 08:22:46", 0.6080], ["2021-11-09 08:22:46", 0.6080], ["2022-01-09 08:22:46", 0.8080], ["2022-03-09 08:22:46", 0.8080], ["2022-05-09 08:22:46", 0.8080], ["2022-07-09 08:22:46", 0.8080], ["2022-08-09 08:22:46", 0.8080], ["2022-10-09 08:22:46", 0.8080], ["2022-11-09 08:22:46", 0.8080], ["2022-12-09 08:22:46", 0.8080], ["2024-10-09 08:22:46", 0.8080], ["2026-10-09 08:22:46", 0.8080], ["2027-10-09 08:22:46", 0.8080]],
				}
			})
			this.init(this.data.chartOptionData.outcome)
			let lineData = this.handleBarData(this.data.chartOptionData.lineOption)
			this.initBar(lineData)
		}, 1000);
	},
	// lazyChart初始化
	init(chartData: any) {
		this.lazyComponent.init((canvas: any, width: any, height: any, dpr: any) => {
			// 图表初始化
			lazyChart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});
			canvas.setChart(lazyChart);
			// 配置图表
			var option;
			option = getLazyOption(chartData)
			lazyChart.setOption(option)

			return lazyChart;
		})
	},

	// 柱状图数据处理
	handleBarData(data: any) {
		console.log(data);
		data = data.map((item: any) => {
			if ((item >= 0.00001) && (item < 0.0001)) {
				item = item * 2000
			} else if ((item >= 0.0001) && (item < 0.001)) {
				item = accAdd(0.2, item * 200)
			} else if ((item >= 0.001) && (item < 0.01)) {
				item = accAdd(0.4, item * 20)
			} else if ((item >= 0.01) && (item < 0.1)) {
				item = accAdd(0.6, item * 2)
			} else if ((item >= 0.1) && (item < 1)) {
				item = accAdd(0.8, item * 0.2)
			} else if (item > 1) {
				item = item
			}
			return item
		})
		console.log(data);
		return data
	},

	// 柱状图初始化
	initBar(lineData: any) {
		this.barComponent.init((canvas: any, width: any, height: any, dpr: any) => {
			// 图表初始化
			let barChart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});
			canvas.setChart(barChart);
			// 配置图表
			barChart.setOption(getBarOption(lineData))

			return barChart;
		})
	},
	changeType(e: any) {
		let type = e.currentTarget.dataset.type
		this.setData({
			type
		})
		let option = getLazyOption(this.data.chartOptionData[type])
		lazyChart.setOption(option)
	},
	onReady() {
	}
});
// 初始化图表1
function initChart(canvas: any, width: any, height: any, dpr: any) {
	// 图表初始化
	chart = echarts.init(canvas, null, {
		width: width,
		height: height,
		devicePixelRatio: dpr
	});
	canvas.setChart(chart);

	// 配置图表
	var option = getOption()
	chart.setOption(option, true);
	return chart;
}
// 配置图表1
function getOption() {
	let option = {
		title: {
			text: 'Referer of a Website',
			subtext: 'Fake Data',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: '50%',
				data: [
					{ value: 1048, name: 'Search Engine' },
					{ value: 735, name: 'Direct' },
					{ value: 580, name: 'Email' },
					{ value: 484, name: 'Union Ads' },
					{ value: 300, name: 'Video Ads' }
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	return option;
}

// 延迟加载的图表2
// 收入的图表
function getLazyOption(data) {
	return {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: data,
				type: 'line'
			}
		]
	}
}

// 支出的图表
function getOutcomeOption() {
	return {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: [100, 100, 100, 218, 135, 147, 260],
				type: 'line'
			}
		],
		color: '#666666'
	}
}

// 柱状图
function getBarOption(lineData: any) {
	return {
		title: {
			text: '大数据量面积图',
		},
		dataZoom: [
			{
				type: 'inside',
				zoomLock: true,
				start: 0,
				end: 30
			},
			// {
			// 	start: 0,
			// 	end: 20
			// }
		],
		xAxis: {
			name: '时间',
			type: 'time',
			min: "2021-01-04",
			minInterval: 3600 * 24 * 1000 * 90,
			axisLabel: {
				//函数模板
				formatter: function (value: any) {
					return timestampToTime(value);
				},
				rotate: 30,
			},
		},
		yAxis: {
			name: 'IS',
			type: "value",
			boundaryGap: [0, '100%'],
			max: 1.2,
			min: 0,
			axisLabel: {
				//函数模板
				formatter: function (value: any) {
					if (value <= 1) {
						return Math.pow(10, (5 * value - 3)) + '%'
					} else {
						return value * 100 + '%'
					}
				}
			},
		},
		series: [
			{
				data: lineData,
				type: 'line',
				smooth: true,
				markArea: {
					itemStyle: {
						color: 'green'
					},
					data: [
						[
							{
							},
							{
								yAxis: '0.8',
								xAxis: '2021-03-01'
							}
						],
						[
							{
								xAxis: '2021-03-01'
							},
							{
								xAxis: '2021-05-01',
								yAxis: '0.6'
							}
						],
						[
							{
								xAxis: '2021-05-01'
							},
							{
								yAxis: '0.4'
							}
						]
					]
				}
			}, {
				type: 'line',
				smooth: true,
				markArea: {
					itemStyle: {
						color: 'yellow'
					},
					data: [
						[
							{
								yAxis: '0.8',
							},
							{
								yAxis: '1',
								xAxis: '2021-03-01'
							}
						],
						[
							{
								yAxis: '0.6',
								xAxis: '2021-03-01'
							},
							{
								yAxis: '0.8',
								xAxis: '2021-05-01'
							}
						],
						[
							{
								yAxis: '0.4',
								xAxis: '2021-05-01'
							},
							{
								yAxis: '0.6'
							}
						]
					]
				}
			}, {
				type: 'line',
				smooth: true,
				markArea: {
					itemStyle: {
						color: 'pink'
					},
					data: [
						[
							{
								yAxis: '1',
							},
							{
								yAxis: '1.2',
								xAxis: '2021-03-01'
							}
						],
						[
							{
								yAxis: '0.8',
								xAxis: '2021-03-01'
							},
							{
								xAxis: '2021-05-01'
							}
						],
						[
							{
								yAxis: '0.6',
								xAxis: '2021-05-01'
							},
							{
							}
						]
					]
				}
			}
		]
	}
}